[CSS] font-size 속성 및 옵션, 절대적인 크기와 상대적인 크기 그리고 팁 알아보기

오늘은 CSS에서 많이 쓰이는 font-size에 대하여 알아보겠습니다. 사실 font-size는 간단한 부분이라 그냥 간과하기 매우 쉽죠. 하지만 폰트는 매우 중요한 부분 중 하나입니다. 그 이유를 알아보면...

• 폰트는 전체 페이지에 모두 적용된다
• 폰트 스타일의 차이가 콘텐츠의 중요도를 결정한다

이런 이유입니다. 그럼 먼저 폰트 옵션으로 선택 가능한 것 알아보겠습니다.

i. pt
ii. px
iii. em
iv. %(percent)


위와 같이 총 4가지 타입이 있습니다. 위에서 부터 알아보면 pt는 예전에 대부분 쓰이던 단위로 inch(인치)를 기준으로 값을 가지며 1pt는 1/72 inch의 값을 가집니다. 절대적인 크기를 가지며 이는 px과 같습니다.

그 다음, px은 pixel(픽셀)을 의미하며 하드웨어가 가진 픽셀 단위의 값을 말합니다. pt와 비교하면 ... 9pt = 12px 입니다. 여기까지가 절대적인 폰트 크기입니다.

그 다음에 위치한 em과 percent는 상위 폰트와의 상대적인 크기로 나타내줍니다. 사실 지금까지는 em과 percent의 필요성을 잘 느끼지 못하였는데요... 아무래도 요새 Portable Device의 웹페이지 빌드가 많아진 만큼 이제는 폰트 사용시 em 또는 percent를 사용해야만 할 것 같습니다...

물론 절대적인 폰트의 사용은 많은 이 점을 가지고 있지만 상대적인 폰트인 em 또는 percent를 사용하면 Resolution이 여러 Device를 고려한 CSS media query를 사용하지 않아도 되기 때문에 코드를 간결하게 코딩할 수 있겠습니다...

em과 pecent는 동일하지만 두 가지 중 하나를 선택하라면 percent를 쓰는 것이 좋다고 합니다. Client측 Device 설정에 따라 em을 사용할 경우보다 percent가 더 일관성을 유지하게 해준다고 합니다 ^^